<template>
  <div class="header">
    <div class="ceshi">
      <img src="../../assets/Pictures/tu40.png">
    </div>
    <p class="test">测一测</p>
    <P class="Costom">定制</P>
  </div>
  <div class="ding-zhi">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
    <van-tabs type="card">
      <van-tab title="肤质近况">
        <img src="../../assets/Pictures/tu13.png">
      </van-tab>
      <van-tab title="了解度32%">
        <img src="../../assets/Pictures/tu14.png">
      </van-tab>
    </van-tabs>
    <div class="need">
      <p>按需定制</p>
    </div>
    <ul class="custom">
      <li>
        <img src="../../assets/Pictures/tu15.png">
        <p class="pic">白成一道光</p>
      </li>
      <li>
        <img src="../../assets/Pictures/tu16.png">
        <p class="pic">年年十八岁</p>
      </li>
      <li>
       <img src="../../assets/Pictures/tu17.png">
        <p class="pic">逃离月球表面</p>
      </li>
    </ul>
    <ul class="custom2">  
      <li>
        <img src="../../assets/Pictures/tu18.png">
        <p class="pic">干掉草莓鼻</p>
      </li>
      <li>
        <img src="../../assets/Pictures/tu19.png">
        <p class="pic">我要水光肌</p>
      </li>
      <li>
        <img src="../../assets/Pictures/tu20.png">
        <p class="pic">拜拜啦敏感</p>
      </li>
    </ul>
    <div class="need">
      <p>按类选择</p>
    </div>
    <van-grid :column-num="4" :gutter="20" :border="false">
      <van-grid-item :icon="require('../../assets/Pictures/tu21.png')" text="卸妆" />
      <van-grid-item :icon="require('../../assets/Pictures/tu22.png')" text="洁面" />
      <van-grid-item :icon="require('../../assets/Pictures/tu23.png')" text="护肤水" />
      <van-grid-item :icon="require('../../assets/Pictures/tu24.png')" text="眼部" />
      <van-grid-item :icon="require('../../assets/Pictures/tu25.png')" text="精华" />
      <van-grid-item :icon="require('../../assets/Pictures/tu26.png')" text="乳液·面霜" />
      <van-grid-item :icon="require('../../assets/Pictures/tu28.png')" text="防晒" />
      <van-grid-item :icon="require('../../assets/Pictures/tu27.png')" text="面膜" />
      <van-grid-item :icon="require('../../assets/Pictures/tu29.png')" text="清洁面膜" />
      <van-grid-item :icon="require('../../assets/Pictures/tu30.png')" text="美容仪器" />
    </van-grid>
    <div class="need">
      <p>医美定制</p>
    </div>
    <van-grid :column-num="4" :gutter="20" :border="false">
      <van-grid-item :icon="require('../../assets/Pictures/tu31.png')" text="卸妆" />
      <van-grid-item :icon="require('../../assets/Pictures/tu32.png')" text="洁面" />
      <van-grid-item :icon="require('../../assets/Pictures/tu33.png')" text="护肤水" />
      <van-grid-item :icon="require('../../assets/Pictures/tu34.png')" text="眼部" />
      <van-grid-item :icon="require('../../assets/Pictures/tu35.png')" text="精华" />
      <van-grid-item :icon="require('../../assets/Pictures/tu36.png')" text="乳液·面霜" />
      <van-grid-item :icon="require('../../assets/Pictures/tu37.png')" text="防晒" />
      <van-grid-item :icon="require('../../assets/Pictures/tu38.png')" text="清洁面膜" />
    </van-grid>
    <div class="New">
      <p>-精品库新品-</p>
    </div>
    <ul class="boutique">
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
    </ul>
    <ul class="boutique">
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
      <li>
        <div class="boutique-img" @click="ToDetail">
          <img src="../../assets/Pictures/tu39.png">
        </div>
        <p>韩束紧致抗皱抗衰老高机能面霜</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  setup() {
    return{}
  },
  methods:{
    ToDetail(){
      this.$router.push("/detail");
    }
  },
}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 55px;
  position: relative;
}
.ceshi{
  width: 25px;
  height: 25px;
  position: absolute;
  top: 17px;
  left: 13px;
}
.ceshi img{
  width: 100%;
  height: 100%;
}
.test{
  font-size: 15px;
  position: absolute;
  top: 25px;
  left: 45px;
}
.Costom{
  font-size: 15.5px;
  position: absolute;
  top: 25px;
  left: 171.5px;
}
.ding-zhi{
  position: fixed;
  top: 55px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: auto;
  border-top: 1px solid #F1F1F1;
}
/deep/.van-tab.van-tab--active{
  background-color: #64C8C8;
}
/deep/.van-tab{
  background-color: #D2F0F2;
}
/deep/.van-tabs__nav--card .van-tab{
  color: white;
  border-right: white;
  margin: 0 1px 0;
  border-radius: 10px 10px 0px 0px;
}
/deep/.van-tabs__nav--card{
  border: 1px solid white;
  height: 100%;
  width: 343.5px;
}
/deep/.van-tab__text--ellipsis{
  font-size: 14.5px;  
  line-height: 40px;
}
/deep/.van-tab__pane img{
  width: 343.5px;
  height: 160.5px;
  margin-left: 16.5px;
  margin-top: 2.5px;
}
/deep/.van-tabs__wrap{
  height: 40px;
}
.need{
  width: 64.5px;
  height: 15.5px;
  margin-left: 17px;
  margin-top: 31.5px;
}
.need p{
  font-size: 15.5px;
  font-weight: bolder;
}
/deep/.van-grid-item__content{
  width: 58px;
  height: 58px;

}
/deep/.van-grid{
 margin: 48.5px 0 0 15px;
}
/deep/.van-icon__image{
  width: 58px;
  height: 58px;
  
}
/deep/.van-grid-item__text{
  width: 53px;
  height: 12.5px;
  color:#565656;
  text-align: center;
}
/deep/.van-grid-item{
  margin-bottom: 24px;
}
.custom{
  width: 298px;
  height: 105.5px;
  margin-top: 28.5px;
  margin-left: 38.5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 23px;
}
.custom2{
  width: 298px;
  height: 105.5px;
  margin-left: 38.5px;
  display: flex;
  justify-content: space-between;
}
.custom.li{
  width: 67px;
  height: 94px;
}
.custom img{
  width: 67px;
  height: 67px;
}
.custom2.li{
  width: 67px;
  height: 94px;
}
.custom2 img{
  width: 67px;
  height: 67px;
}
.pic{
  font-size: 12.5px;
  color:#565656;
  margin-top: 14.5px;
}
.boutique{
  width: 343.5px;
  height: 140px;
  display: flex;
  justify-content: space-between;
  margin-top: 23.5px;
  margin-left: 20px;
}
.boutique-img{
  width: 103.5px;
  height: 103.5px;
  border: 1px solid #BFBFBF;
}
.boutique-img img{
  width: 82px;
  height: 82px;
  margin: 4px 0 0 10px;
}
.boutique p{
  width: 103.5px;
  font-size: 14px;
  margin-top: 8.5px;
}
.New{
  width: 100%;
  height: 62px;
  padding-top: 48px;
}
.New p{
  font-size: 14px;
  font-weight: bolder;
  color: #000000;
  text-align: center;
}
</style>